<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教学详情-普通激光打印机A4尺寸，缩放100%</title>
    <style>
        .table-row .row {
            width: 8%; /* 需要确保计算结果有效 */
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 0;
            margin: 0;
        }

        @media print {
            .noprint {
                display: none
            }
        }

        #app {
            width: 96%;
            margin: 1.2%;
            height: 100%;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            *zoom: 1;
            height: 0px;
        }

        .printButton {
            width: 100px;
            height: 30px;
            border-radius: 4px;
            background: #fafafa;
            font-size: 12px;
            float: right;
            border: 1px solid #ccc;
            margin-left: 20px;
            background: #ff9900;
            color: #fff;
            cursor: pointer;
        }

        .info {
            width: auto;
            padding: .5em 1em .5em 0;
            height: 100%;
            border: 1px solid #000;
            line-height: 30px;
            font-size: 14px;
            display: flex;
            float: right;
            margin-top: 10px;
            align-items: center;
            justify-content: center;
        }

        .info span {
            float: left;
            width: 100%;
            height: 50%;
            display: block;
        }

        .table {
            float: left;
            width: 100%;
            height: 112px;
            margin-top: 10px;
        }

        .table-row {
            border-right: 0;
            list-style: none;
            width: 100%;
            height: 34px;
            box-sizing: border-box;
        }

        .table-row .row {
            box-sizing: border-box;
            border: 1px solid #000;
            height: 100%;
            display: block;
            float: left;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .table-row .row2 {
            box-sizing: border-box;
            border: 1px solid #000;
            width: 15%;
            height: 100%;
            display: block;
            float: left;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .table-row font {
            width: 95%;
            height: 50px;
            line-height: 50px;
            display: block;
            font-size: 14px;
        }

        .rowOne {
            width: 100%;
        }

        .wordRow {
            width: 50%;
            height: 176px;
            float: left;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .wordGroup {
            border: 1px solid #555;
            border-bottom: 0;
            width: 99%;
            box-sizing: border-box;
        }

        .wordList {
            width: 100%;
            list-style: none;
            text-align: center;
        }

        .word {
            border-bottom: 1px solid #555;
            border-right: 1px solid #555;
            font-weight: 500;
            float: left;
            width: 50%;
            height: 34px;
            display: block;
            box-sizing: border-box;
            line-height: 34px;
            white-space: nowrap;
            overflow: hidden;
        }

        .paraphrase {
            border-bottom: 1px solid #555;
            float: left;
            width: 50%;
            height: 34px;
            word-wrap: normal;
            font-size: 14px;
            box-sizing: border-box;
            line-height: 34px;
        }

        .switchButton {
            float: left;
            width: 100px;
            height: 30px;
            border-radius: 4px;
            font-size: 12px;
            border: 0px solid #ccc;
            background: #ff9900;
            color: #fff;
            display: inline;
            cursor: pointer;
        }

        .article {
            float: left;
            width: 100%;
            margin-top: 20px;
            line-height: 30px;
        }

        .article h1, h2 {
            line-height: 50px;
        }

        .wordList {
            display: flex
        }

        .wordRow {
            height: auto;
            margin-top: 5px
        }

        .word, .paraphrase {
            white-space: normal;
            overflow: inherit;
            float: none;
            height: auto;
            word-wrap: inherit;
            display: flex;
            align-items: center;
            justify-content: center
        }

        @media screen and (max-width: 1000px) {
            .wordRow {
                width: 100%
            }

            tbody tr {
                flex-wrap: wrap;
                display: flex;
                margin-left: -20px
            }

            tbody td {
                margin: 0 0 5px 5px
            }

            .table.date {
                width: 200%
            }

            .date-view {
                overflow-x: auto
            }

            .info {
                margin-bottom: 35px;
                display: block;
                padding-bottom: .5em
            }

            .info span:first-child {
                float: none;
                white-space: nowrap
            }

            .info span {
                width: fit-content;
                padding-left: 1em
            }

            .info button {
                margin-right: 1em
            }

            .paraphrase {
                font-size: 14px
            }

            .wordGroup {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="noprint" style="margin:20px 20px;">
        <row></row>
        <table>
            <tbody>
            <tr>
                <td>
                    <button @click="showDiglossia" class="switchButton">打印中英文</button>
                </td>
                <td>
                    <button @click="showEnglish" class="switchButton">打印英文</button>
                </td>
                <td>
                    <button @click="showChinese" class="switchButton">打印中文</button>
                </td>
                <td>
                    <button @click="showPronunciation" class="switchButton">打印音标</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- 中英文全部显示 -->
    <div id="diglossia" class="rowOne" v-show="diglossiaShow">
        <template v-if="words">
            <div class="wordRow" v-for="(item,index1) in words" :key="index1">
                <div class="wordGroup" style="margin-right: 1%;" v-if="item">
                    <li class="wordList" v-for="(value,index2) in item" :key="index2">
                        <span class="word" style="font-size: 18px;">{{ value.word }}</span>
                        <span class="paraphrase">{{ value.translation }}</span>
                    </li>

                </div>
            </div>
        </template>

    </div>

    <!--  仅显示英文和音标  -->
    <div id="pronunciation" class="rowOne" v-show="pronunciationShow">
        <template v-if="words">
            <div class="wordRow" v-for="(item,index1) in words" :key="index1">
                <div class="wordGroup" style="margin-right: 1%;" v-if="item">
                    <li class="wordList" v-for="(value,index2) in item" :key="index2">
                        <span class="word" style="font-size: 18px;">{{ value?.word }}</span>
                        <span class="paraphrase">{{ value?.phonetic }}</span>
                    </li>
                </div>
            </div>
        </template>
    </div>

    <!--  仅显示英文  -->
    <div id="english" class="rowOne" v-show="englishShow">
        <template v-if="words">
            <div class="wordRow" v-for="(item,index1) in words" :key="index1">
                <div class="wordGroup" style="margin-right: 1%;" v-if="item">
                    <li class="wordList" v-for="(value,index2) in item" :key="index2">
                        <span class="word" style="font-size: 18px;">{{ value?.word }}</span>
                        <span class="paraphrase"></span>
                    </li>
                </div>

            </div>
        </template>
    </div>

    <!--  仅显示中文  -->
    <div id="chinese" class="rowOne" v-show="chineseShow">
        <template v-if="words">
            <div class="wordRow" v-for="(item,index1) in words" :key="index1">
                <div class="wordGroup" style="margin-right: 1%;" v-if="item">
                    <li class="wordList" v-for="(value,index2) in item" :key="index2">
                        <span class="word" style="font-size: 18px;"></span>
                        <span class="paraphrase">{{ value?.translation }}</span>
                    </li>
                </div>

            </div>
        </template>
    </div>

    <div class="clearfix" style="clear: both;"></div>
    <div class="date-view" style="width: 100%; display: block;">
        <div class="table date">
            <li class="table-row">
                <span class="row2"><font>第几天</font></span>
                <template v-if="antiForgettingDatas.length === 0">
                    <span class="row" v-for="(item,index) in days" :key="index"><font></font></span>
                </template>
                <template v-if="antiForgettingDatas.length > 0">
                    <span class="row" v-for="(item,index) in antiForgettingDatas" :key="index"><font>{{ days[index] }}</font></span>
                </template>
            </li>


            <li class="table-row">
                <span class="row2"><font>复习日期</font></span>
                <template v-if="antiForgettingDatas.length===0">
                    <span class="row" v-for="(item,index) in days" :key="index"><font></font></span>
                </template>
                <template v-if="antiForgettingDatas.length>0">
                    <span class="row" v-for="(item,index) in antiForgettingDatas" :key="index"><font>{{ item }}</font></span>
                </template>
            </li>
            <li class="table-row">
                <span class="row2"><font>遗忘词数</font></span>
                <template v-if="antiForgettingDatas.length===0">
                    <span class="row" v-for="item in antiForgettingDatas" :key="item"><font></font></span>
                </template>
                <template v-if="antiForgettingDatas.length>0">
                    <span class="row" v-for="item in days" :key="item"><font></font></span>
                </template>
            </li>

        </div>
    </div>

    <div class="info" style="margin-bottom:50px">
        <span style="padding-left: 1em;white-space: nowrap;">学生：{{ student?.name }}    助教：{{ teacher?.name }} </span>
        <span style="white-space: nowrap">打印时间：{{ printDate }}</span>
        <button onclick="window.print();" class="noprint printButton">打印</button>
    </div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            diglossiaShow: true,//中英文
            englishShow: false,//英文
            chineseShow: false,//中文
            pronunciationShow: false,//英文和音标
            antiForgettingDatas: [],
            words: [],
            student: {},
            printDate: '',
            teacher: {},
            days: {}
        },
        methods: {
            async getRecordInfo() {
                const location = window.location
                const search = location.search;
                const urlParams = new URLSearchParams(search);
                const recordId = urlParams.get('recordId');
                const origin = location.origin;
                const result = await axios.post(origin + '/common_api/print/skRecordPrint', {
                    recordId: recordId
                }, {
                    headers: {
                        'Server': 1,
                        'platform': 'common'
                    }
                })
                if (result.data.code === 0) {
                    this.words = result.data.data?.words
                    this.student = result.data.data?.student
                    this.printDate = result.data.data?.printDate
                    this.teacher = result.data.data?.teacher
                    this.days = result.data.data?.days
                    this.antiForgettingDatas = result.data.data?.antiForgettingDatas
                    if (this.words.length > 0) {
                        this.diglossiaShow = true
                    }
                }
            },
            showDiglossia() {
                this.diglossiaShow = true
                this.englishShow = false
                this.chineseShow = false
                this.pronunciationShow = false
            },
            showEnglish() {
                this.diglossiaShow = false
                this.englishShow = true
                this.chineseShow = false
                this.pronunciationShow = false
            },
            showChinese() {
                this.diglossiaShow = false
                this.englishShow = false
                this.chineseShow = true
                this.pronunciationShow = false
            },
            showPronunciation() {
                this.diglossiaShow = false
                this.englishShow = false
                this.chineseShow = false
                this.pronunciationShow = true
            }
        },
        created() {
            this.getRecordInfo()
        }
    })
</script>
</html>